<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

<div>
    <h1>The Ajax 02 Page</h1>
    <button onclick="doAjaxGet()">Do Ajax Get</button>
    <button onclick="doAjaxPost()">Do Ajax Post</button>
    <button onclick="doAjaxPostJson()">Do Ajax Post Json</button>
    <button onclick="doAjaxDelete()">Do Ajax Delete</button>
    <button onclick="doAjaxPut()">Do Ajax Put</button>
</div>
<span id="result"></span>
<script type="text/javascript">
    function doAjaxGet(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    document.getElementById("result").innerHTML=
                        xhr.responseText;
                        //将服务端响应的json格式字符串，转换为json格式的js对象,然后从对象取数据
                        let json=JSON.parse( xhr.responseText);
                        console.log(json[0].city);
                }
            }
        }
        let params="beijing"
        xhr.open("GET",`http://localhost:8080/doAjaxGet/${params}`,true);
        xhr.send(null);
    }
    function doAjaxPost(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }
        xhr.open("POST","http://localhost:8080/doAjaxPost",true);
        //post请求向服务端传递数据,需要设置请求头,必须在open之后
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //发送请求(post请求传递数据,需要将数据写入到send方法内部)
        xhr.send("id=102&city=shenzhen");
    }

    function doAjaxPostJson(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }
        xhr.open("POST","http://localhost:8080/doAjaxPostJson",true);
        //post请求向服务端传递数据,需要设置请求头,必须在open之后
        xhr.setRequestHeader("Content-Type", "application/json");
        //发送请求(post请求传递数据,需要将数据写入到send方法内部)
        let params={id:103,city:"xiongan"};
        //将json格式的js对象转换为json格式字符串
        let paramsStr=JSON.stringify(params);
        xhr.send(paramsStr);
    }

    function doAjaxDelete(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }
        let params="102";
        xhr.open("delete",`http://localhost:8080/doAjaxDelete/${params}`,true);
        xhr.send(null);
    }

    function doAjaxPut(){
        let xhr=new XMLHttpRequest();
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4){
                if(xhr.status==200){
                    document.getElementById("result").innerHTML=xhr.responseText;
                }
            }
        }
        xhr.open("put","http://localhost:8080/doAjaxPut",true);
        //post请求向服务端传递数据,需要设置请求头,必须在open之后
        xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
        //发送请求(post请求传递数据,需要将数据写入到send方法内部)
        xhr.send("id=101&city=tianjin");
    }
</script>

</body>
</html>